<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>修改用户个人信息</title>
  <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css" media="all">
  <script src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
  <script src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
</head>
<body>
<div style="width: 1000px;margin-top: 30px;">
  <form class="layui-form" action="" id="saveUserForm" lay-filter="saveUserFormFilter">
    <div class="layui-form-item">
      <label class="layui-form-label">用户Id</label>
      <div class="layui-input-inline">
        <input type="text" name="userid" required lay-verify="required" readonly="readonly" placeholder="用户名id"
               value="${user.userid}" class="layui-input" style="background-color: #eea236;">
      </div>
      <label class="layui-form-label">部门名称</label>
      <div class="layui-input-inline">
        <input type="text" name="deptid" disabled value="${user.deptName}" class="layui-input" style="background-color: #eea236;">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">用户名</label>
      <div class="layui-input-inline">
        <input type="text" name="username" required lay-verify="required" value="${user.username}" class="layui-input">
      </div>
      <label></label>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">电话</label>
      <div class="layui-input-inline">
        <input type="text" name="phonenumber" value="${user.phonenumber}" class="layui-input">
      </div>
      <label></label>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">邮箱</label>
      <div class="layui-input-inline">
        <input type="text" name="email" value="${user.email}" class="layui-input">
      </div>
      <label></label>
    </div>
    <input type="hidden" id="avatar" name="avatar" value="">
    <div class="layui-form-item">
      <label class="layui-form-label">头像</label>
      <div class="layui-upload">
        <button type="button" class="layui-btn" id="addimg" style="margin-left: 110px;">修改图片</button>
        <div class="layui-upload-list" style="margin-left: 110px;">
          <img class="layui-upload-img" id="demo1" src="${user.avatar}" style="margin-top: -47px;width: 100px;height: 100px">
          <p id="demoText3"></p>
        </div>
      </div>
    </div>
    <div class="layui-form-item" >
      <div class="layui-input-inline" style="width: 100%;text-align: center">
        <button class="layui-btn" lay-submit lay-filter="formSaveUser">保存</button>
      </div>
    </div>
  </form>
</div>
</body>
<script>
  layui.use(['upload','jquery','form'],function (){
    var upload = layui.upload;
    var $ = layui.jquery;
    var form = layui.form;

// 添加的提交按钮
    var submitBtn = $("button[lay-filter='formSaveUser']");
// 初始化为失效状态
    submitBtn.attr("disabled","disabled").attr("style","background-color: #808080");
// 用户名校验
    $("#saveUserForm input[name='username']").on('blur',function (){
      var username = $("#saveUserForm input[name='username']");
      if (username.val() === ""){
        username.parent().next().html("用户名不能为空").attr("style","color: #ff0000;line-height: 38px");
      }else {
// 唯一性校验
        $.ajax({
          url: '${pageContext.request.contextPath}/user/queryUserByName.do',
          data: {
            username: username.val(),
          },
          dataType: 'JSON',
          type: 'GET',
          success: function (redata) {
            if (redata.code == 0){
              username.parent().next().html("ok").attr("style","color: #00ff00;line-height: 38px");
              submitBtn.removeAttr("disabled").removeAttr("style","background-color: #808080");
            }else {
              username.parent().next().html("用户名重复，请更换").attr("style","color: #ff0000;line-height: 38px");
            }
          }
        });
      }
    });
// 邮箱校验
    $("#saveUserForm input[name='email']").on('blur',function (){
      var email = $("#saveUserForm input[name='email']");
      var reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$");
      if (email.val() === ""){
        email.parent().next().html("邮箱不能为空").attr("style","color: #ff0000;line-height: 38px");
      }else if(!reg.test(email.val())){
        email.parent().next().html("请填写正确的邮箱格式!~").attr("style","color: #ff0000;line-height: 38px");
      }else{
        email.parent().next().html("ok").attr("style","color: #00ff00;line-height: 38px");
        submitBtn.removeAttr("disabled").removeAttr("style");
      }
    });
// 电话校验
    $("#saveUserForm input[name='phonenumber']").on('blur',function (){
      var phonenumber = $("#saveUserForm input[name='phonenumber']");
      var reg = new RegExp("^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$");
      if (phonenumber.val() === ""){
        phonenumber.parent().next().html("电话不能为空").attr("style","color: #ff0000;line-height: 38px");
      }else if(!reg.test(phonenumber.val())){
        phonenumber.parent().next().html("请填写正确的电话格式!~").attr("style","color: #ff0000;line-height: 38px");
      }else{
        phonenumber.parent().next().html("ok").attr("style","color: #00ff00;line-height: 38px");
        submitBtn.removeAttr("disabled").removeAttr("style");
      }
    });

//常规使用 - 普通图片上传
     var uploadInst = upload.render({
      elem: '#addimg'
      ,url: '${pageContext.request.contextPath}/upload.do'
      ,done: function(res) {
        if (res.code == 0) {
          // 上传成功的一些操作
          $('#avatar').val( res.msg);
          $('#demo1').src = "";
          $('#demo1').attr('src',  res.msg); //图片链接（base64）
          submitBtn.removeAttr("disabled").removeAttr("style","background-color: #808080");
        }else{
          // 如果上传失败
          return layer.msg('上传失败');
        }
      },
      error: function() {
//演示失败状态，并实现重传
        var demoText = $('#demoText3');
        demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
        demoText.find('.demo-reload').on('click', function() {
          uploadInst.upload();
        });
      }
    });
// 保存修改后的信息
    form.on('submit(formSaveUser)', function (data) {
      $.ajax({
        url: "${pageContext.request.contextPath}/user/update.do"
        , data: {
          "userid": data.field.userid
          ,"username": data.field.username
          ,"email": data.field.email
          ,"phonenumber": data.field.phonenumber
          ,"avatar": data.field.avatar
        }
        , dataType: "json"
        , type: "post"
        , success: function (redata) {
          if (redata.code == 0) {
            layer.msg(redata.msg + "。右上角信息将在下次登录时展示。");
            // window.location.href = "./home.jsp"
          } else {
            layer.msg(redata.msg);
          }
        }
      });
      return false;
    });
  });
</script>
</html>